<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }"> <a>首页</a></el-breadcrumb-item>
		<el-breadcrumb-item v-for="(item,index) in crumbMenu" :key="index">
			<a @click="toPath(item)" :class="!item.components?'noPath':''">{{ item.meta.tittle }}</a>
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script lang="ts" setup>
	import {
		computed
	} from "vue";
	import {
		useRouter
	} from "vue-router";

	const router = useRouter()
	const crumbMenu = computed(() => router.currentRoute.value.matched.filter((item, index) => {
		return index > 0 && item.meta.tittle != "首页"
	}))
	const toPath = (item) => {
		console.log(item)
		if (!item.components) return false
		router.push({
			path: item.path
		})
	}
</script>

<style scoped>
	.noPath,
	.noPath:hover {
		color: #888888;
		cursor: not-allowed !important;
	}
</style>
